<template>
    <div id="talk">
        <!--工具栏目-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0;">
            <el-form :inline="true" :model="ActData">
                <el-form-item>
                    <el-input type="number" min="0" v-model="ActData.uid" placeholder="请输入要搜索的用户ID"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input v-model="ActData.body" placeholder="请输入要搜索的内容"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="postTalk">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </el-col>

        <el-table :data="ActIty" highlight-current-row v-loading="listLoading" @selection-change="selsChange"
                  style="width: 100%;">
            <el-table-column prop="user.id" label="发布者ID" width="100"></el-table-column>
            <el-table-column prop="user.nickName" label="发布者昵称" ></el-table-column>
            <el-table-column label="发布内容(点击查看详情)">
                <template slot-scope="scope">
                    <div @click="detailsDit(scope.row)">
                        <p class="text fall" v-text="scope.row.body" ></p>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="commentNum" label="评论数"></el-table-column>
            <el-table-column prop="upNum" label="点赞数"></el-table-column>
            <el-table-column label="操作" width="80">
                <template slot-scope="scope">
                    <el-button type="danger" size="small" @click="handleDel(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <el-col :span="24" class="toolbar">
            <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="size"
                           :total="total" style="float:right;"></el-pagination>
        </el-col>
        <!--说说详情-->
        <el-dialog title="说说详情" :visible.sync="dialogVisible" :before-close="handleClose">
            <span v-if="detailsDialog" v-text="detailsDialog"></span>
            <span v-else>没有数据</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">返   回</el-button>
            </span>
        </el-dialog>

        <!--新增说说-->
        <el-dialog title="新增说说" :visible.sync="dialogVisibleAdd" :before-close="handleCloseAdd" v-if="dialogVisibleAdd">
            <el-form ref="addForm" :model="addForm" :rules="addTalk" label-width="80px">
                <el-form-item label="说说内容" prop="body">
                    <el-input type="textarea" max="255" v-model="addForm.body" placeholder="内容最大长度为255字符"></el-input>
                </el-form-item>
                <el-form-item label="说说图片">
                    <el-upload
                            :action="$store.state.imagesUrl + 'api/common/file/upload/image'"
                            list-type="picture-card" :before-upload="beforeAvatarUpload"
                            :on-remove="handleRemove" :headers="MyHeaders" :on-success="handleSuccess">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addTalks('addForm')" :loading="addLoading">提交</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
    import util from '../../common/js/util';
    import {talkAdd,talkComment,talkCommentDel,talkDel,talkList,talkListOne,talkUp,talkUpdate} from '../../api/api';
    export default {
        data() {
            return {
                ActIty: [],
                total: 0,
                page: 1,
                size: 10,
                ActData: {
                    uid: null,
                    body: ''
                },
                listLoading: false,
                sels: [],
                /*说说详情*/
                dialogVisible: false,
                detailsDialog : '',
                /*新增*/
                dialogVisibleAdd: false,
                addForm: {
                    body: ''
                },
                addLoading: false,
                MyHeaders: {'X-Authentication': JSON.parse(sessionStorage.getItem('user'))},
                addTalk: {
                    body: {required: true, message: '请输入内容', trigger: 'blur'},
                },
                fall: []
            }
        },
        methods: {
            selsChange: function (sels) {
                this.sels = sels;
            },
            handleCurrentChange(val) {
                this.page = val;
                this.postTalk();
            },
            /*打开说说详情*/
            detailsDit(row){
                this.dialogVisible = true;
                this.detailsDialog = row.body;
            },
            handleClose(done){ done();},
            postTalk(){
                let para = {
                    page: this.page,
                    size: this.size,
                    data: this.ActData
                };
                this.listLoading = true;
                talkList(para).then(res => {
                    console.log(res);
                    this.listLoading = false;
                    this.ActIty = res.data.content;
                    this.total = res.data.totalElements;
                })
            },
            /*新增*/
            handleAdd(){
                this.dialogVisibleAdd = true;
                this.fall = [];
                this.addForm = {
                    body: ''
                };
            },
            handleCloseAdd(done){ done();},
            handleRemove(file) {
                console.log(file);
                for (let i = 0; i < this.fall.length; i++ ){
                    if(this.fall[i] === file.response.data.path){
                        this.fall.splice(i,1);
                    }
                }
            },
            handleSuccess(file) {
                console.log(file,this.fall);
                this.fall.push(file.data.path);
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg' || 'image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            addTalks(a){
                let para = this.addForm;
                para.imagePaths = this.fall.join(",");
                console.log(this.fall,para);
                this.$refs[a].validate((valid) => {
                    if (valid) {
                        this.$confirm('确认提交吗？', '提示', {}).then(() => {
                            this.addLoading = true;
                            talkAdd(para).then(res => {
                                console.log(res);
                                this.addLoading = false;
                                this.$message({message: res.message, type: 'success'});
                                this.dialogVisibleAdd = false;
                                this.postTalk();
                            })
                        })
                    }
                })
            },
            /*删除*/
            handleDel(row){
                this.$confirm('确认删除该记录吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    let para = {id: row.id};
                    let id = row.id;
                    talkDel(id, para).then((res) => {
                        this.listLoading = false;
                        this.$message({
                            message: res.message,
                            type: 'success'
                        });
                        this.postTalk();
                    });
                }).catch(() => {
                });
            },
        },
        mounted(){
            this.postTalk();
        }
    }
</script>
<style type="text/scss" lang="scss" scoped>
    #talk{
        .text{
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            &.fall{
                cursor: pointer;

            }
        }
    }
</style>